@import 'common';
.content{
    height: 100vh;
}
// top-banner区域
.top-banner{
    position: relative;
    width: 10rem;
    height: 1.333333rem;
    a{
        display: block;
        img{
            width: 10rem;
            height: 1.333333rem;
        }
    }
    .close{
        position: absolute;
        left: 0.08rem;
        top: 0.333333rem;
        width: 0.666667rem;
        height:0.666667rem;
        background: url(../images/close.png) no-repeat center center;
        background-size: 0.4rem auto;

    }
}
// 头部header区域
header{
    width: 10rem;
    height: 2.4rem;
    background: url(../images/banner_bg.jpg) no-repeat center center;
    // banner区域
    .banner{
        display: flex;
        justify-content: space-between;
        width: 9.093333rem;
        height: 1.173333rem;
        margin: 0 0.453333rem;
        
        a{
            display: block;
            margin-top: 0.226667rem;
            img{
                width: 0.48rem;
                height: 0.8rem;
            }
            
        }
        a:nth-child(2){
            margin-top: 0;
            img{  
               margin: 0.24rem 0.666667rem 0 0;
               width: 6rem;
               height: 0.733333rem; 
            }
        }
    }
    // 搜索区域
    .search-bar{
        position: relative;
        .search{
            display: block;
            margin: 0 auto;
            width: 9.36rem;
            height: 1.173333rem;
            z-index: 10;
        }
        .search-icon{
            position: absolute;
            left: 0.586667rem;
            top: 0.346667rem;
            width: 0.48rem;
            height: 0.48rem;
            background: url(../images/search_btn.png) no-repeat center center;
            background-size: 0.48rem 0.48rem;
            z-index: 5;
            vertical-align: middle;
        }
        form{
           position: absolute;
           top: 0;
           left: 0.32rem;
           width: 9.36rem;
           height:1.173333rem ;
           input{
               padding: 0.04rem 0.266667rem 0 0.866667rem;
               width: 9.36rem;
               height: 0.813333rem;
               border-radius: 0.426667rem;
               box-sizing: border-box;
               font-size: 0.4rem;
               margin-top: 0.16rem;
               outline: none;
           }
        }
        
    }
}
//index-wrap区域
.index-wrap{
    .wrapTop{
        width: 10rem;
        height: 3.466667rem;
        background: url(../images/index-nav-bg.jpg) no-repeat center center;
        background-size: 10rem 3.466667rem;
        .swiperWrap{
          position: relative;
          width: 9.36rem;
          height: 3.466667rem;  
          margin: 0 auto;
          overflow: hidden;
          border-radius: 0.266667rem;
          .swiperList{
              position: relative;
              width: 600%;
              height: 3.466667rem;
              margin: 0;
              li{
                  position: absolute;
                  left: 9.36rem;
                  top: 0;
                  width: 9.36rem;
                  height: 3.466667rem;
                  &.current{
                      left: 0;
                  }
                  img{
                    width: 9.36rem;
                    height: 3.466667rem;
                  }
              }
          }
          .circle{
            position: absolute;
            left: 50%;
            bottom:0;
            transform: translateX(-50%);
            li{
               display: inline-block;
               width: 0.12rem;
               height: 0.106667rem;
               border-radius: 50%;
               margin: 0 0.053333rem;
               background-color: rgba(0, 0, 0, .3);
               &.current{
                   width: 0.24rem;
                   height: 0.106667rem;
                   background-color: #fff;
                   border-radius: 0.053333rem;
               }
            }
          }
        }
    }
    .wrapMiddle{
        width: 10rem;
        height: 2.56rem;
        a{
            display:block;
            img{
                width: 10rem;
                height: 2.56rem;
            }
        }
    }
    .wrapButton{
        width: 10rem;
        height: 2.626667rem;
        overflow: hidden;
       a{
          display: block;
          float: left;
          img{
              width: 3.333333rem;
              height: 2.626667rem;
          }
       } 
       
    }
}
// nav区域
nav{
    width: 10rem;
    height: 4.106667rem;
    .navList{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        li{
            width: 20%;
            a{ 
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 1.893333rem;
                text-align: center;
                .navIcon{
                   width: 1.12rem;
                   height: 1.12rem;
                   text-align:center
                }
                p{
                    margin-top: 2.5px;
                    font-size: 0.32rem;
                    color: #666;
                }
            }
        }
    }
}
//红包区域
.redPacket{
margin: 0.32rem 0;
width: 10rem;
height: 3.12rem;
display: flex;
justify-content: center;
 a{
   display: block;
   width: 25%; 
   img{
     width: 2.48rem;
     height: 3.12rem;
   }
  }
  .first{
    width: 50%;
    img{
        width: 4.96rem;
        height: 3.12rem;
      }
  }
}
//main区域
main{
    //设置了main区域的左右间距
    margin:0 0.333333rem;
    margin-bottom: 1.333333rem;
    // 特价区域
    .specialPrice{
        display: flex;
        justify-content: center;
        width: 9.333333rem;
        .specialbox{
          width: 49.9%;
          height: 3.44rem;
          padding-left: 0.32rem;
          box-sizing: border-box;
          background-color: #fff;
          border-bottom: 0.026667rem solid  #F2F2F2;
          .title-wrapper{
              display: flex;
              justify-content: flex-start;
              height: 0.773333rem;
              font-weight: 700;
            .title{
                margin-top: 0.24rem;
                margin-right: 0.106667rem;
                height: 0.533333rem;
                line-height: 0.533333rem;
                font-size: 0.373333rem;
            }
            .count{
                height: 0.373333rem;
                margin-top: 0.32rem;
                overflow: hidden;
                span{
                    float: left;
                    display: block;
                    width: 0.453333rem;
                    height: 0.373333rem;
                    line-height: 0.373333rem;
                    font-size: 0.32rem;
                    text-align: center;
                    background-color: #FFCC00;
                    border-radius: 0.08rem;
                }

                i{ 
                    float: left;
                    display: block;
                    font-size: 0.32rem;
                    text-align: center;
                    line-height:0.373333rem ;
                    margin: 0 0.053333rem;
                }
            }
          }
          .des{
              font-size: 0.32rem;
              color: #999;
              margin-top: 0.053333rem;
          }
          ul{
              margin-top: 0.066667rem;
              margin-left: 0.053333rem;
              display: flex;
              justify-content: center;
              li{
                  position: relative;
                  width: 50%;
                  height: 1.986667rem;
                  a{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: 1.6rem;
                        height: 1.6rem;
                    }
                    .price{
                        margin-top: 0.013333rem;
                        color: #FF5500;
                        font-size: 0.32rem;
                    }
                    .arr{
                        position: absolute;
                        bottom:-0.133333rem;
                        left: -0.1rem;
                        width: 2rem;
                        height: 0.72rem;
                        text-align: center;
                        background: url(../images/arrow_bg.png) no-repeat center center;
                        background-size:2rem 0.72rem;
                        font-size: 0.32rem;
                        padding-top: 0.533333rem;
                    }
                  }
              }
          }
          
        }
        .specialbox:nth-child(1){
            border-top-left-radius: 0.133333rem;
            border-right: 0.026667rem solid  #F2F2F2;
        }
        .specialbox:nth-child(2){
            border-top-right-radius: 0.133333rem;
        }
    }
    //为你推荐
    .recommend{
       width: 9.333333rem;
       height:2.293333rem;
       background-color: #fff;
       border-bottom-left-radius: 0.133333rem;
       border-bottom-right-radius: 0.133333rem;
       display: flex;
       justify-content: flex-start;
       .recommend-l{
           padding: 0.626667rem 0.24rem 0;
           width: 1.826667rem;
           height: 1.813333rem;
           p:nth-child(1){
               color: #444;
               font-size: 0.426667rem;
               font-weight: 700;
           }
           p:nth-child(2){
            color: #999;
            font-size: 0.32rem;
           }
       }
       .recommend-r{
           width: 6.773333rem;
           display: flex;
           justify-content: flex-start;
           li{
               width: 1.6rem;
               a{
                   display: flex;
                   flex-direction: column;
                   justify-content: center;
                   height: 2.293333rem;
                   align-items: center;
                   img{
                       width: 1.333333rem;
                       height: 1.333333rem;
                   }
                   p{
                       font-size: 0.32rem;
                   }
               }
           }
       }
    }
    //优惠券
    .discount{
        width: 9.333333rem;
        height: 3.413333rem;
        margin-top: 0.133333rem;
        margin-bottom: 0.2rem;
        display: flex;
        justify-content: space-between;
        a{  
            position: relative;
            display: block;
            width: 2.226667rem;
            height: 3.24rem;
            background-color: #fff;
            border-radius: 0.08rem;
            background: url(../images/pink-bg.png) no-repeat center center;
            background-size:2.226667rem 3.24rem;
            text-align: center;
            img{
              display: block;
              width: 1.866667rem;
              height: 1.866667rem;
              margin: 0.12rem auto 0;
            }
            .title{
                font-size: 0.346667rem;
                margin-top: 0.133333rem;
                color: #fffff0;
            }
            .desc{
                width: 1.866667rem;
                height: 0.426667rem;
                border-radius: 0.213333rem;
                background-color: #fff;
                font-size: 0.32rem;
                margin-left: 0.186667rem;
                color: #E244AA;
            }
        }
        a:nth-child(2){
            background: url(../images/purple-bg.png) no-repeat center center;
            background-size:2.226667rem 3.24rem;
        }
        a:nth-child(3){
            background: url(../images/yellow-bg.png) no-repeat center center;
            background-size:2.226667rem 3.24rem;
        }
        a:nth-child(4){
            background: url(../images/green-bg.png) no-repeat center center;
            background-size:2.226667rem 3.24rem;
        }
    }
    //推荐榜单
    .recommendations{
      .title{
        display: block;
        height: 0.8rem;
        margin-left: -0.333333rem;
        img{
        height: 0.8rem;
        }
      }
      .recommendationsList{
          display: flex;
          justify-content: space-between;
          .recommendationsItem{
              width: 3.013333rem;
              height: 3.546667rem;
              background-color: #fff;
              border-radius: 0.133333rem;
              
              .top{
                  img{
                      width: 2rem;
                      height: 2rem;
                      margin: 0.2rem 0.506667rem 0;
                  }
              }
              .bottom{
                  position: relative;
                  height: 1.24rem;
                  background: url(../images/product75_bg01.png) no-repeat center center;
                  background-size:3.013333rem  1.24rem;
                  color: #fff;
                  text-align: center;
                  .peopleList{
                      position: absolute;
                      top: -0.226667rem;
                      left: 50%;
                      margin-left: -0.666667rem;
                      width: 1.333333rem;
                      height: 0.453333rem;
                      background-color: #fff;
                      border: 0.026667rem solid #D9A87A;
                      border-radius: 0.453333rem;
                      font-size: 0.32rem;
                      color:#D9A87A ;
                  }
                  .productList{
                      padding-top: 0.24rem;
                      font-size: 0.346667rem;
                  }
                  .productNum{
                      font-size: 0.32rem;
                      opacity: 0.8;
                  }
              }
              .diff{
                background: url(../images/product75-bg02.png) no-repeat center center;
                background-size:3.013333rem  1.24rem;
              }
          }
      }

    }
    //猜你喜欢
    .like{
        margin-top: 0.533333rem;
        .title{
            height: 0.8rem;
            background:url(../images/like.webp) no-repeat center center;
            background-size: 9.333333rem 0.8rem;
        }
        .likeList{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .likeItem{
                width: 4.56rem;
                height: 7.226667rem;
                background-color: #fff;
                margin-bottom: 0.24rem;
                .pic{
                    width: 4.56rem;
                    height: 4.56rem;
                    img{
                        width: 4.56rem;
                        height: 4.56rem;
                    }
                }
                .des{
                    .desTitle{
                        margin: 0.24rem 0.16rem 0;
                        width: 4.24rem;
                        height: 0.893333rem;
                        line-height: 0.426667rem;
                        font-size: 0.346667rem;
                        font-weight: 700;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .desBtn{
                        margin: 0.146667rem 0.16rem 0.32rem;
                        font-size: 0.32rem;
                        .self{
                            display: inline-block;
                            margin-right: 0.08rem;
                            height: 0.32rem;
                            line-height: 0.32rem;
                            background-color: #FFCC00;
                            padding: 0.04rem 0.08rem;
                            border-radius: 0.133333rem;
                        }
                        .other{
                            display: inline-block;
                            margin-left: 0.026667rem;
                            margin-right: 0.04rem;
                            background-color:#FEFBEE ;
                            height: 0.213333rem;
                            line-height:0.266667rem ;
                            padding: 0.026667rem 0.16rem;
                            border-radius: 0.08rem;
                            border: 1px solid #FFBB00;

                        }
                    }
                    .desPrice{
                        height: 0.506667rem;
                        color: #FF4422;
                        font-size: 0.32rem;
                        font-weight: 700;
                        margin-left: 0.16rem;
                        span:nth-child(1){
                          line-height: 0.362667rem;
                        }
                        span:nth-child(2){
                            font-size: 0.48rem;
                            line-height: 0.48rem;
                            margin-left: -0.053333rem;

                        }
                        span:nth-child(3){
                            margin-left: -0.08rem;
                        }
                        span:nth-child(4){
                            color: #999;
                            margin-left: 0.173333rem;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
    }
}
// footer部分
footer{
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 10rem;
    height: 1.333333rem;
    background-color: #fff;
    border-top: 1px solid #eee;
    margin: 0 auto;
    a{
        display: block;
        width: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
            width: 0.64rem;
            height: 0.64rem;
        }
        p{
            font-size: 0.32rem;
        }
    }
}
